{% extends "base.html" %}
{% block title %}配置信息{% endblock %}
{% load staticfiles %}
{% block content %}
    <div class="am-modal am-modal-prompt" tabindex="-1" id="my-copy">
        <div class="am-modal-dialog">
            <div style="font-size: medium;" class="am-modal-hd">HttpRunnerManager</div>
            <div class="am-modal-bd">
                <form class="form-horizontal" id="copy_list">
                    <div class="form-group">
                        <label class="control-label col-sm-3" for="index"
                               style="font-weight: inherit; font-size: small " hidden>索引值：</label>
                        <div class="col-sm-9">
                            <input name="index" type="text" class="form-control" id="index"
                                   placeholder="索引值" value="" hidden>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-3" for="name"
                               style="font-weight: inherit; font-size: small ">配置名称：</label>
                        <div class="col-sm-9">
                            <input name="name" type="text" class="form-control" id="name"
                                   placeholder="给配置起个名吧" value="">
                        </div>
                    </div>

                </form>
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-confirm" tabindex="-1" id="my-invalid">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">HttpRunnerManager</div>
            <div class="am-modal-bd">
                亲，请确认该配置是否被其他用例依赖后再谨慎删除哦
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>确定</span>
            </div>
        </div>
    </div>


    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on"> 配置列表</ul>
            <dl class="am-icon-home" style="float: right;"> 当前位置： 用例管理 > <a href="#">配置展示</a></dl>
            <dl>
                <button type="button" class="am-btn am-btn-primary am-round am-btn-xs am-icon-plus"
                        onclick="location='/api/add_case/'">新增用例
                </button>
                <button type="button" class="am-btn am-btn-warning am-round am-btn-xs am-icon-plus"
                        onclick="location='/api/add_config/'">新增配置
                </button>
            </dl>
        </div>

        <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
            <form id="pro_filter" method="post" action="/api/config_list/1/">
                <ul>
                    <li style="padding-top: 5px">
                        <select name="project" class="am-input-zm am-input-xm"
                                onchange="auto_load('#pro_filter', '/api/add_case/', '#module', 'module')">
                            <option value="{{ info.belong_project }}"
                                    selected>{{ info.belong_project }}</option>
                            {% for foo in project %}
                                {% ifnotequal info.belong_project foo.project_name %}
                                    <option value="{{ foo.project_name }}">{{ foo.project_name }}</option>
                                {% endifnotequal %}
                            {% endfor %}
                            {% if info.belong_project != 'All' %}
                                <option value="All">All</option>
                            {% endif %}
                        </select>

                    </li>

                    <li style="padding-top: 5px">
                        <select name="module" class=" am-input-zm am-input-xm" id="module">
                        </select>
                    </li>

                    <li style="padding-top: 5px"><input value="{{ info.name }}" type="text" name="name"
                                                        class=" am-input-zm am-input-xm"
                                                        placeholder="用例名称"/></li>
                    <li>
                    <li style="padding-top: 5px"><input value="{{ info.user }}" type="text" name="user"
                                                        class="am-input-sm am-input-xm"
                                                        placeholder="创建者"/>
                    </li>
                    <li>
                        <button style="padding-top: 5px; margin-top: 9px"
                                class="am-btn am-radius am-btn-xs am-btn-success">搜索
                        </button>
                    </li>
                </ul>
            </form>
        </div>


        <form class="am-form am-g" id='test_list' name="test_list">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                <tr class="am-success">
                    <th class="table-check"><input type="checkbox" id="select_all"/></th>
                    <th class="table-title">序号</th>
                    <th class="table-type">名称</th>
                    <th class="table-type">所属项目</th>
                    <th class="table-type">所属模块</th>
                    <th class="table-type">创建者</th>
                    <th class="table-date am-hide-sm-only">创建时间</th>
                    <th width="163px" class="table-title">操作</th>
                </tr>
                </thead>
                <tbody>
                {% for foo in test %}
                    <tr>
                        <td><input type="checkbox" name="config_{{ foo.id }}" value="{{ foo.id }}"/></td>
                        <td>{{ forloop.counter }}</td>
                        <td><a href="/api/edit_config/{{ foo.id }}/">{{ foo.name }}</a>
                        </td>
                        <td>{{ foo.belong_project }}</td>
                        <td>{{ foo.belong_module.module_name }}</td>
                        <td>{{ foo.author }}</td>
                        <td class="am-hide-sm-only">{{ foo.create_time }}</td>
                        <td>
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <button type="button"
                                            class="am-btn am-btn-default am-btn-xs am-text-danger am-round"
                                            data-am-popover="{content: '复制', trigger: 'hover focus'}"
                                            onclick="copy('#copy_list', '{{ foo.id }}')"><span
                                            class="am-icon-copy"></span></button>
                                    <button type="button"
                                            class="am-btn am-btn-default am-btn-xs am-text-danger am-round"
                                            data-am-popover="{content: '删除', trigger: 'hover focus'}"
                                            onclick="invalid('{{ foo.id }}')"><span
                                            class="am-icon-trash-o"></span></button>

                                </div>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <div class="am-btn-group am-btn-group-xs">
                <button type="button" class="am-btn am-btn-default" onclick="location='/api/add_case/'"><span
                        class="am-icon-plus"></span> 新增用例
                </button>
                <button type="button" class="am-btn am-btn-default" onclick="location='/api/add_config/'"><span
                        class="am-icon-plus"></span> 新增配置
                </button>
            </div>

            <ul class="am-pagination am-fr">
                {{ page_list }}
            </ul>


            <hr/>

        </form>
    </div>
    <script type="text/javascript">

        function invalid(name) {
            $('#my-invalid').modal({
                relatedTarget: this,
                onConfirm: function () {
                    del_data_ajax(name, '/api/config_list/1/')
                },
                onCancel: function () {
                }
            });
        }

        function copy(id, index) {
            $('#index').val(index);
            $('#my-copy').modal({
                relatedTarget: this,
                onConfirm: function () {
                    copy_data_ajax(id, '/api/config_list/1/')
                },
                onCancel: function () {
                }
            });
        }

        $('#select_all').click(function () {
            var isChecked = $(this).prop("checked");
            $("input[name^='config']").prop("checked", isChecked);
        });

        $().ready(function () {
            auto_load('#pro_filter', '/api/add_case/', '#module', 'module');
        });
    </script>
{% endblock %}